<template>
  <div>
    <div class="app-container dealerdetail_container">
      <div class="page_header">闭水试验工单详情</div>
      <el-tabs v-model="tabTypeInfo" type="card">
        <el-tab-pane label="闭水试验信息" name="testInfo"></el-tab-pane>
      </el-tabs>
      <div class="detail_page" v-show="tabTypeInfo === 'testInfo'">
        <el-form  ref="elForm" :model="formData"  size="medium" label-width="120px">
          <el-form-item label="试验结果">
            <el-upload
              ref="resultJson"
              :file-list="formData.closeWater.resultJson"
              :headers="urlHeaders"
              :action="urlAction"
              :limit="5"
              :before-upload="urlBeforeUpload"
              :on-success="handleFileSuccess"
              list-type="picture"
              accept="image/*"
            >
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的图片文件</div>
            </el-upload>
          </el-form-item>

          <el-form-item label="试验确认">
            <el-radio-group v-model="formData.closeWater.alarmType">
              <el-radio :label="true">已完成防漏处理并贴好警示标示</el-radio>
              <el-radio :label="false">未完成并未贴警示贴</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="警告标示图片">
            <el-upload
              ref="alarmJson"
              :file-list="formData.closeWater.alarmJson"
              :headers="urlHeaders"
              :action="urlAction"
              :limit="5"
              :before-upload="urlBeforeUpload"
              :on-success="handleFileSuccess"
              list-type="picture"
              accept="image/*"
            >
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的图片文件</div>
            </el-upload>
          </el-form-item>

          <el-form-item label="施工确认">
            <el-radio-group v-model="formData.closeWater.closeWaterType">
              <el-radio :label="'1'">未被破坏</el-radio>
              <el-radio :label="'2'">被破坏，影响不大</el-radio>
              <el-radio :label="'3'">被破坏，额外费用</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="额外费用" v-if="formData.closeWater.closeWaterType=='3'">
               <el-input v-model="formData.closeWater.amount" placeholder="请输入额外费用"></el-input>
          </el-form-item>


          <el-form-item label="破坏图片" v-if="formData.closeWater.closeWaterType=='3'||formData.closeWater.closeWaterType=='2'">
            <el-upload
              ref="destructionJson"
              :file-list="formData.closeWater.destructionJson"
              :headers="urlHeaders"
              :action="urlAction"
              :limit="5"
              :before-upload="urlBeforeUpload"
              :on-success="handleFileSuccess"
              list-type="picture"
              accept="image/*"
            >
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的图片文件</div>
            </el-upload>
          </el-form-item>

          <el-form-item label="备注">
            <el-input v-model="formData.closeWater.remark" placeholder="请输入备注信息"></el-input>
          </el-form-item>
          <el-form-item label="支付信息">
            <el-table
              :data="formData.measure.periodList"
              style="width: 100%">
              <el-table-column
                prop="payName"
                label="期数"
                width="180">
              </el-table-column>
              <el-table-column
                prop="payRate"
                label="货款比例(%)"
                width="180">
              </el-table-column>
              <el-table-column
                prop="paymentAmount"
                label="金额">
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.paymentStatus=='未支付'" @click="addPayment(scope.row)"  size="mini" type="text" >待支付</el-button>
                  <el-button v-if="scope.row.paymentStatus=='已支付'"  size="mini" type="text" >已支付</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item size="large">
            <el-button v-if="formData.closeWater.closeStatus=='3'"  @click="psyBack()" :disabled="pending" >模拟支付</el-button>
            <el-button v-if="formData.closeWater.closeStatus!='3'" type="primary" :disabled="pending" @click="submitForm('3')">完成提交</el-button>
            <el-button v-if="formData.closeWater.closeStatus!='3'"  @click="submitForm('2')" :disabled="pending" >保存草稿</el-button>
          </el-form-item>

        </el-form>


      </div>
    </div>
  </div>
</template>

<script>
  import { getTestOrderById } from '@/api/order/order'
  import {addCloseWater, addPayment, orderPayBack} from '@/api/test/order'
  import { getToken } from '@/utils/auth'
  import { uploadUrl } from '@/settings.js'
  export default {
    name: 'Closewater',
    components: {},
    data() {
      return {
        tabTypeInfo: 'testInfo',
        activeName:'first',
        formData: {
          closeWater:{
                orderId:'',
                resultJson:[],
                destructionJson:[],
                alarmType:true,
                alarmJson:[],
                remark:'',
                constructionStatus:'1',
                closeWaterType:'1',
                amount:'0',
                orderCode:''
          },
          measure:{
            periodList:[]
          }
        },
        loading:true,
        pending:false,
        urlAction: uploadUrl,
        urlHeaders: {
          Authorization: 'Bearer ' + getToken()
        },
        payBackObject:{}
      }

    },
    computed: {
      ID() {
        this.formData.closeWater.orderId= this.$route.query.id;
        return this.formData.closeWater.orderId;
      }
    },
    async created() {
    },
    async mounted() {
      if (this.ID){
        this.getOrderById();
      }
    },
    methods: {
      //获取订单详情
      async getOrderById(){
        const res = await getTestOrderById(this.ID)
        const formData=this.formData;
        if(res.data.closeWater){
          this.formData={...formData,...res.data};
          if(this.formData.closeWater.resultJson){
            this.formData.closeWater.resultJson=JSON.parse(this.formData.closeWater.resultJson);
          }else{
            this.formData.closeWater.resultJson=[];
          }
          if(this.formData.closeWater.alarmJson){
            this.formData.closeWater.alarmJson=JSON.parse(this.formData.closeWater.alarmJson);
          }else{
            this.formData.closeWater.alarmJson=[];
          }
          if(this.formData.closeWater.destructionJson){
            this.formData.closeWater.destructionJson=JSON.parse(this.formData.closeWater.destructionJson);
          }else{
            this.formData.closeWater.destructionJson=[];
          }
        }

      },
      urlBeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        let isAccept = new RegExp('image/*').test(file.type)
        if (!isAccept) {
          this.$message.error('应该选择image/*类型的文件')
        }
        return isRightSize && isAccept
      },
      handleFileSuccess(response, file, fileList) {
        if (response.code !== 200) {
          const index = fileList.findIndex((per) => per.uid === file.uid)
          fileList.splice(index, 1)
          this.$message({ message: response.msg, type: 'error' })
        }
      }, async addPayment(row){
        //发起重新支付
        const res = await addPayment({orderCode:row.payOrderCode});
        if (res.code === 200) {
          this.msgSuccess(res.msg)
        }
      },
      async psyBack(){
        console.log(this.payBackObject);
        if(!this.payBackObject) {
          this.msgError("请先确认订单后提交");
          return;
        }
        try {
          this.pending = true
          const par={ payCode:this.payBackObject}
          const res = await orderPayBack(par);
          if (res.code === 200) {
            this.msgSuccess(res.msg)
          }
        } catch (error) {
          console.log(error)
        }
        this.pending = false
      },
      async submitForm(status) {
        try {
            this.pending = true
            this.formData.closeWater.resultJson = this.$refs['resultJson'].uploadFiles.map(function(per){
              if(per.response){
                return per.response.data;
              }
              return per;
            });
            this.formData.closeWater.alarmJson = this.$refs['alarmJson'].uploadFiles.map(function(per){
              if(per.response){
                return per.response.data;
              }
              return per;
            })
          if(this.$refs['destructionJson']){
            this.formData.closeWater.destructionJson = this.$refs['destructionJson'].uploadFiles.map(function(per){
              if(per.response){
                return per.response.data;
              }
              return per;
            })
          }
            const datas={
              ...this.formData.closeWater,
              closeStatus:status,
              orderCode:this.formData.orderCode
            }
            console.log(JSON.stringify(datas));
           const res =   await addCloseWater (datas);
           if (res.code === 200) {
            this.msgSuccess(res.msg)
             this.payBackObject=res.data.orderCode;
             this.getOrderById();
           }
        } catch (error) {
          console.log(error)
        }
        this.pending = false
      }
    }
  }
</script>

<style lang='scss'>
  .dealerdetail_container {
    .detail_page {
      .detail_label {
        width: 150px;
      }
    }
  }
</style>




